<template>
  <div>
    <div class="box">
      <div class="head">
        <div class="flex">
          <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
          <span style="margin-left: 10px">交底详情</span>
        </div>
        <el-button type="primary" class="btn" @click="look" v-if="info.type == 2">预览</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column fixed type="index" align="center" label="序号" width="50" />
        <el-table-column
          fixed
          prop="staff_name"
          align="center"
          show-overflow-tooltip
          label="被交底人"
          min-width="140"
        />
        <el-table-column prop="img_url" align="center" label="签字照片" width="120">
          <template #default="scope">
            <el-image
              v-if="scope.row.img_url"
              :src="scope.row.img_url"
              style="height: 60px; width: auto; max-width: 100px;"
              :preview-src-list="[scope.row.img_url]"
              alt="签字照片"
            ></el-image>
            <span v-else style="color: #999; font-size: 12px;">暂无签字</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="状态" min-width="140">
          <template #default="scope">
            {{ scope.row.complete_status == 9 ? '已交底' : '未交底' }}
          </template>
        </el-table-column>
        <el-table-column prop="complete_time" align="center" label="交底时间" min-width="140"></el-table-column>
        <el-table-column v-if="info.type == 1" align="center" label="操作" width="100">
          <template #default="scope">
            <div class="action">
              <span @click="look">预览</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="margin-top: 5px; text-align: right"
        @size-change="search"
        @current-change="getList"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="预览" :visible.sync="dialogVisible" width="844px" style="height: 100vh" :close-on-click-modal="false">
      <div class="info-box">
        <h2 class="info-title">
          {{ info.project_name || '' }}
        </h2>
        <div class="info-table">
          <div class="cell-box">
            <div class="cell-item">
              <div class="cell-label">工程名称</div>
              <div class="cell-content">
                {{ info.project_name || '' }}
              </div>
            </div>
            <div class="cell-item">
              <div class="cell-label">施工单位</div>
              <div class="cell-content">
                {{ info.build_name || '' }}
              </div>
            </div>
          </div>
          <div class="cell-box">
            <div class="cell-item">
              <div class="cell-label">监理单位</div>
              <div class="cell-content">
                {{ info.supervision_name || '' }}
              </div>
            </div>
            <div class="cell-item">
              <div class="cell-label">建设单位</div>
              <div class="cell-content">
                {{ info.construction_name || '' }}
              </div>
            </div>
          </div>
          <div class="row-box">
            <div class="row-lable">工程概况</div>
            <div class="row-content">
              {{ info.overview }}
            </div>
          </div>
          <div class="row-box">
            <div class="row-lable">交底内容</div>
            <div class="row-content">
              <div v-html="info.content || ''"></div>
            </div>
          </div>
          <div class="row-box">
            <div class="row-lable">现场风险</div>
            <div class="row-content">
              {{ info.risk || '' }}
            </div>
          </div>
          <div class="row-box">
            <div class="row-lable">备注</div>
            <div class="row-content">
              {{ info.remark }}
            </div>
          </div>
          <div class="cell-box">
            <div class="cell-item">
              <div class="cell-label">交底人签名</div>
              <div class="cell-content">
                <el-image
                v-if="autograph.staff_sign"
                  :src="autograph.staff_sign"
                  class="signature-img"
                  :preview-src-list="[autograph.staff_sign]"
                  alt=""
                ></el-image>
                <span v-else>暂无签名</span>
              </div>
            </div>
            <div class="cell-item">
              <div class="cell-label">交底时间</div>
              <div class="cell-content">
                {{ info.disclose_time || '' }}
              </div>
            </div>
          </div>
          <div class="user-box">
            <div class="user-label">被交底人签名</div>
            <div class="user-content">
              <!-- 单签模式：只显示第一个签名 -->
              <el-image
                v-if="info.sign_type == 1 && autograph.other_staff_signs && autograph.other_staff_signs.length > 0"
                :src="autograph.other_staff_signs[0]"
                class="signature-img"
                :preview-src-list="[autograph.other_staff_signs[0]]"
                alt=""
              ></el-image>
              <!-- 多签模式：显示所有签名 -->
              <el-image
                v-else-if="info.sign_type == 2"
                v-for="(item, index) in autograph.other_staff_signs"
                :key="index"
                :src="item"
                class="signature-img"
                :preview-src-list="autograph.other_staff_signs"
                alt=""
              ></el-image>
              <!-- 无签名时的提示 -->
              <span v-if="!autograph.other_staff_signs || autograph.other_staff_signs.length === 0">暂无签名</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { DiscloseStaffs, DiscloseInfo, DiscloseGetDiscloseAutographs } from '@/api/manage';
export default {
  name: 'cultivate',
  data() {
    return {
      tableHeight: 500,
      queryData: {
        page: 1,
        size: 10,
      },
      total: 0,
      isTableLoading: false,
      tableData: [],
      dialogVisible: false,
      info: {},
      autograph: {
        other_staff_signs: [],
        staff_sign:''
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
    this.getInfo();
    this.getDiscloseAutographs();
  },
  methods: {
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.name = '';
      this.queryData.type = [];
      this.queryData.date = [];
      this.search();
    },
    edit(item, type) {
      if (type == 1) {
        this.$router.push({
          path: '/company/addCourse/index',
        });
      } else {
        this.$router.push({
          path: '/company/courseDetails/index',
        });
      }
    },
    look(iem) {
      if ( this.autograph.other_staff_signs ) {
        this.autograph.staff_sign = this.autograph.other_staff_signs.at(-1)
      }
      this.dialogVisible = true;
    },
    delOk() {
      this.$delete(this.tableData, this.item.$index);
      this.dialogVisible = false;
    },
    add() {
      this.$router.push({
        path: '/company/addCourse/index',
      });
    },
    getList() {
      this.isTableLoading = true;
      this.queryData.id = this.$route.query.id;
      DiscloseStaffs(this.queryData).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.isTableLoading = false;
      });
    },
    getInfo() {
      DiscloseInfo({
        id: this.$route.query.id,
      }).then((res) => {
        this.info = res.data.data;
      });
    },
    getDiscloseAutographs() {
      DiscloseGetDiscloseAutographs({
        id: this.$route.query.id,
      }).then((res) => {
        this.autograph = res.data;
      });
    },
    back() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.flex {
  width: 100%;
  align-items: center;
  margin-bottom: 20px;
}
.info-box {
  width: 794px;
}
.info-title {
  text-align: center;
  color: black;
}
.info-table {
  margin-top: 20px;
  border: 1px solid #000;
}
.cell-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.cell-item {
  display: grid;
  grid-template-columns: 120px 1fr;
}
.cell-box:last-child .cell-label {
  border-bottom: none;
}
.cell-box:last-child .cell-content {
  border-bottom: none;
}
.cell-item:last-child .cell-content {
  border-right: none;
}
.cell-label {
  width: 120px;
  padding: 8px 14px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 42px;
}
.cell-content {
  padding: 8px 14px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  min-height: 42px;
  display: grid;
  place-items: center;
  text-align: center;
}
.row-box {
  display: grid;
  grid-template-columns: 42px 1fr;
}
.row-box:last-child .row-lable {
  border-bottom: none;
}
.row-box:last-child .row-content {
  border-bottom: none;
}
.row-lable {
  padding: 8px 12px;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 200px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.row-content {
  padding: 8px 12px;
  border-bottom: 1px solid #000;
}
.signature-img {
  height: 42px;
  width: auto;
  max-width: 120px;
}
.user-box {
  display: grid;
  grid-template-columns: 120px 1fr;
}
.user-label {
  padding: 8px 12px;
  border-right: 1px solid #000;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 42px;
}
.user-content {
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
}
</style>
